<template>
  <div id="barCharts" class="barCharts">
  </div>
</template>
<script>
import BS from '../dataManage'
import { changeKind,changeMsg } from '../vuex/action'
var echarts = require('echarts');
export default {
  data(){
    return{
      
    }
  },
  props:{
    'barurl':{
      type:String
    }
  },
  vuex: {
   getters: {
      kind(state) {
        return state.kind
      },
      msg(state){
        return state.msg
      }
    }
  },
  ready() {
    var myChart = echarts.init(document.getElementById('barCharts'));       
      // 绘制图表
      myChart.setOption({
          title: { 
            text: '部门业务信息化度发布', 
            subtext: '(数值代表接入应用数量)', 
            x :'center',
            textStyle :{
              fontSize :16,
              fontWeight:'normal',
              color:'#ffffff'
            },
            subtextStyle :{
               color:'#b3c2cc'
            }
          },
             tooltip : {
              trigger: 'axis',
              axisPointer : {          
                  type : ''
              }
          },
          grid: {
              left: '10',
              right: '10',
              
          },
          xAxis : [
              {
                  type : 'category',
                  data : [],
                  axisLine:{
                    show:false,
                    lineStyle:{
                      color:'#ffffff',
                      width :'100'
                    }
                   },
                   axisTick:{
                    show:false
                   }
              }
          ],
          yAxis : [
              {
                  type : 'value',
                  show:false
              }
          ],
          series : [{
                  name:'',
                  type:'bar',
                  barWidth: '60%',
                  data:[],
                   markLine : {
                    symbol :'',
                    label :{
                      normal:{
                        show:true,
                        formatter: '{b}: {c}',
                        position :'middle'
                      }
                    },
                    lineStyle: {
                        normal: {
                            type: 'dashed',
                            color:'#aaeaff'
                        }
                    },
                    data : [
                        {type : 'average', name: '平均接入量'}
                    ]
                  }
              }]
        });  
      BS.getAppCenterBar.call(myChart,this.msg,this.barurl,this.kind);
      this.$watch('msg',function(){
        BS.getAppCenterBar.call(myChart,this.msg,this.barurl,this.kind);
      })
       this.$watch('kind',function(){
        BS.getAppCenterBar.call(myChart,this.msg,this.barurl,this.kind);
      })
  }
}
</script>

<style scoped>
.barCharts{
  width: 100%;
  height: 360px;
  margin-top: 16px;
  display: inline-block;
}
</style>


